/**
 * @Author: likang xie
 * @Date: 2019-11-09 10:58:25
 * @Usage: 常用布局类
 */

.container {
  box-sizing: border-box;
  padding: 20upx;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block;
}

.none {
  display: none;
}

.hidden {
  overflow: hidden;
}

.width {
  width: 100%;
  @extend .block;
}

.height {
  height: 100%;
  @extend .block;
}

// ---- 定位相关 ----
.pull-right {
  float: right;
}

.relative {
  position: relative;
}

// ---- 对齐相关 ----
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.middle {
  vertical-align: middle;
}

.letter-spacing {
  letter-spacing: 4upx;
}

// ---- Flex盒子 -----
.box {
  display: flex;

  &.box-row-center {
    justify-content: center;
  }

  &.box-column-center {
    align-items: center;
  }

  &.box-center {
    @extend .box-row-center;
    @extend .box-column-center;
  }

  &.box-between {
    justify-content: space-between;
  }

  &.box-around {
    justify-content: space-around;
  }

  &.box-column {
    flex-flow: column;
  }

  &.box-warp {
    flex-wrap: wrap;
  }

  &.box-end {
    justify-content: flex-end;
  }
}

@for $i from 1 through 12 {
  .box-#{$i} {
    flex: $i;
  }
}